/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div>
    <div v-if="this.nowNumber === 1" class="optimizetype">
        <span>{{$t('edge.pattern.optimizetype')}}</span>
        <el-select v-model="value" clearable :placeholder="$t('edge.common.select')">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="$t('edge.overview.type' + item.value)"
                :value="item.value"
                >
            </el-option>
            </el-select>
            <span class="optimiNum">{{$t('edge.pattern.optimizecycle')}}</span>
            <el-input v-model="optimizecycle" clearable :placeholder="$t('edge.common.enter')"></el-input>
        <el-button type="primary" @click="optimize()">{{$t('edge.pattern.inoptimize')}}</el-button>
    </div>
  <div class="board-column" :style="{marginTop:this.nowNumber === 1 ? 0 : '50px'}">
    <div class="board-column-header">
      {{headerText}}
    </div>
    <div class="board-table-header">
      <el-row :gutter="13">
        <el-col :span="4">{{this.$t('edge.overview.phase')}}
        </el-col>
        <el-col :span="10">{{this.$t('edge.overview.flow')}}
        </el-col>
        <el-col :span="10">{{this.$t('edge.overview.saturationflow')}}
        </el-col>
      </el-row>
    </div>
    <draggable
      class="board-column-content"
      :list="list"
      :options="options">
      <div class="board-item" v-for="element in list" :key="element.id">
        <el-row :gutter="13">
          <el-col :span="4">
            <el-tooltip class="item" effect="dark" placement="left">
              <div slot="content">{{element.name}}</div>
              <div class="phase-description">
                <xdrdirselector Width="70px" Height="70px" Widths="58px" Heights="58px" :Datas="styles" :Data="showStyle" :showlist="element.desc" :ISActiveMask="ISActiveMask" :MaskColor="MaskColor"></xdrdirselector>
              </div>
            </el-tooltip>
        </el-col>
        <el-col :span="10">
            <el-input-number :controls="false" class="col-content" size="small"  :step="1" v-model.number="element.flowperhour" ref="type" :disabled="element.mode === 7"></el-input-number>
        </el-col>
        <el-col :span="10">
            <el-input-number :controls="false" class="col-content" size="small"  :step="1" v-model.number="element.saturation" ref="types" :disabled="element.mode === 7"></el-input-number>
        </el-col>
        </el-row>
      </div>
    </draggable>
  </div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import { getDuration } from '@/api/cross'
import xdrdirselector from '@/components/XRDDirSelector'

export default {
  name: 'patternOptimize',
  components: {
    draggable,
    xdrdirselector
  },
  data () {
    return {
      showStyle: {
        left: '7px',
        top: '0px'
      },
      styles: {
        left: '7px',
        top: '0px'
      },
      typeOptions: [{
        value: 'flow-split-opt'
      }, {
        value: 'cycle-opt'
      }],
      value: '',
      optimizecycle: 0
    }
  },
  props: {
    headerText: {
      type: String,
      default: 'Header'
    },
    id: {
      type: Number
    },
    rings: {
      type: Array
    },
    nowNumber: {
      type: Number
    },
    phaseList: {
      type: Array
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    },
    list: {
      type: Array,
      default () {
        return []
      }
    },
    // index: {
    //   type: Number
    // },
    ISActiveMask: {
      type: Boolean,
      default: true
    },
    // 当phase的描述为空时，显示的图形颜色。
    MaskColor: {
      type: String,
      default: '#000000'
    }
  },
  created () {
    // this.addMinSplit()
    this.addMin()
  },
  computed () {

  },
  watch: {
    list: {
      handler: function () {
        // let list = this.$refs.type
        // let flow = this.$refs.types
        // console.log(this.list, 'list')
        // let cycle = 0
        // let n = this.index
        // for (let i = 0; i < list.length; i++) {
        //   cycle = cycle + Number(list[i].currentValue)
        // }
        // const globalParamModel = this.$store.getters.globalParamModel
        // // let MaxCycle = globalParamModel.getParamsByType('patternList')[n].cycle
        // let pattern = globalParamModel.getParamsByType('patternList')[n]
        // globalParamModel.getParamsByType('patternList')[n].cycle = this.getMaxCycle(pattern)
        // this.addMinSplit()
        // this.$emit('handleSplit', n)
      },
      deep: true
    }
  },
  methods: {
    optimize () {
      let newPha = []
      for (let i = 0; i < this.rings.length; i++) {
        newPha.push(...this.rings[i])
      }
      let phaseData = newPha.map(item => {
        return {
          id: item.id,
          flowperhour: item.flowperhour,
          saturation: item.saturation
        }
      })
      let patternList = this.$store.state.globalParam.tscParam.patternList
      let pattern = patternList.filter((item) => item.id === this.id)[0]
      let reqData = {
        'type': this.value,
        'optcycle': this.optimizecycle,
        'phaseList': this.phaseList,
        'pattern': pattern,
        'phases': phaseData
      }
      let isValidata = []
      for (let j = 0; j < newPha.length; j++) {
        let comNum = (newPha[j].length / 4) * 1700 * 0.8
        isValidata.push(newPha[j].flowperhour > comNum)
      }
      if (isValidata.includes(true)) {
        this.$confirm(this.$t('edge.overview.maxFlow'),
          this.$t('edge.common.alarm'), {
            confirmButtonText: this.$t('edge.common.confirm'),
            cancelButtonText: this.$t('edge.common.cancel'),
            type: 'warning'
          }).then(() => {
          getDuration(reqData).then(data => {
            if (data.data.success) {
              this.$message({
                type: 'success',
                message: this.$t('edge.pattern.success')
              })
              for (let i = 0; i < this.rings.length; i++) {
                for (let j = 0; j < this.rings[i].length; j++) {
                  for (let h = 0; h < data.data.data.phase.length; h++) {
                    if (this.rings[i][j].id === data.data.data.phase[h].id) {
                      this.rings[i][j].value = data.data.data.phase[h].duration
                      // this.rings[i][j].cycle = data.data.data.phase[h].cycle
                    }
                  }
                }
              }
            }
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
        })
      } else {
        getDuration(reqData).then(data => {
          if (data.data.success) {
            this.$message({
              type: 'success',
              message: this.$t('edge.pattern.success')
            })
            for (let i = 0; i < this.rings.length; i++) {
              for (let j = 0; j < this.rings[i].length; j++) {
                for (let h = 0; h < data.data.data.phase.length; h++) {
                  if (this.rings[i][j].id === data.data.data.phase[h].id) {
                    this.rings[i][j].value = data.data.data.phase[h].duration
                    // this.rings[i][j].cycle = data.data.data.phase[h].cycle
                  }
                }
              }
            }
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    addMin () {
      for (let i of this.list) {
        if (!i.flowperhour || !i.saturation) {
          i.length = this.list.length
          i.flowperhour = 0
          i.saturation = 1700
        }
      }
    }
    // addMinSplit () {
    //   const globalParamModel = this.$store.getters.globalParamModel
    //   let phaseList = globalParamModel.getParamsByType('phaseList')
    //   for (let ls of this.list) {
    //     let phase = phaseList.filter((item) => {
    //       return item.id === ls.id
    //     })[0]
    //     if (!phase.redyellow) {
    //       phase.redyellow = 0
    //     }
    //     if (!phase.yellow) {
    //       phase.yellow = 0
    //     }
    //     if (!phase.redclear) {
    //       phase.redclear = 0
    //     }
    //     if (!phase.flashgreen) {
    //       phase.flashgreen = 0
    //     }
    //     if (!phase.phasewalk) {
    //       phase.phasewalk = 0
    //     }
    //     if (!phase.pedclear) {
    //       phase.pedclear = 0
    //     }
    //     // let temp1 = phase.redyellow + phase.yellow + phase.redclear + phase.flashgreen // 绿信比的最小值要大于最小绿+黄灯+全红+绿闪
    //     // let temp2 = phase.phasewalk + phase.pedclear
    //     // if (temp1 > temp2) {
    //     //   ls.minSplit = temp1
    //     // } else {
    //     //   ls.minSplit = temp2
    //     // }
    //     // if (ls.mode !== 7 && ls.value < ls.minSplit) {
    //     //   ls.value = ls.minSplit
    //     // }
    //     // let temp1 = phase.yellow + phase.redclear + phase.flashgreen // 绿信比的最小值要大于最小绿+黄灯+全红+绿闪
    //     let temp1 = phase.yellow + phase.redclear + phase.mingreen
    //     let temp2 = phase.yellow + phase.redclear + phase.phasewalk + phase.pedclear
    //     ls.minSplit = temp1 > temp2 ? temp1 : temp2
    //     if (ls.mode !== 7 && ls.value < ls.minSplit) {
    //       ls.value = ls.minSplit
    //       this.$message.error(this.$t('edge.pattern.splitCheckMsg'))
    //     }
    //   }
    // },
    // getMaxCycle (pattern) {
    //   let rings = pattern.rings
    //   let maxCycle = 0
    //   for (let ring of rings) {
    //     if (ring.length === 0) continue
    //     let cycle = 0
    //     for (let r of ring) {
    //       if (r.mode === 7) { // 忽略相位不计周期
    //         continue
    //       }
    //       cycle = cycle + r.value
    //     }
    //     if (cycle > maxCycle) {
    //       maxCycle = cycle
    //     }
    //   }
    //   return maxCycle
    // },
    // doChange (val) {
    //   // if (val.mode === 7) {
    //   //   val.value = 0
    //   // } else {
    //   //   val.value = 30
    //   // }
    // }
  }
}
</script>
<style lang="scss" scoped>
.col-content {
  width: 100%;
}
.optimizetype{
  margin:0 0 10PX 0;
  .el-input {
    width: 80PX;
  }
  .el-select{
    width: 145PX;
  }
  .el-button {
    margin-left: 10PX;
  }
  .optimiNum {
    padding-left: 10PX;
  }
}
</style>
